Vue3中 引入Ant Design(推荐阅读) |
您所在的位置：网站首页 › vue design pro › Vue3中 引入Ant Design(推荐阅读) |
|
Ant Design 是一个很好用的前端组件库，里面包含有很多基础组件，能极大提高我们的开发效率 下面先贴出 官方文档，里面的介绍已经十分全面和详细，大家遇到的很多问题都可以在上面找到答案 假设现在我们已经用 vue-cli 3 工具创建了一个 Vue 项目，然后怎么在项目中引入 Ant Design 呢？ 首先介绍一下 vue-cli 3 默认生成的目录结构，关于 vue-cli 3 的具体使用可以参考我的 另一篇文章 + demo + node_modules（存放第三方模块） + public（存放静态文件） - favicon.ico（图标） - index.html （页面模板） + src（我们自己写的文件一般放在这个文件夹下） + assets（存放资源文件） + components（存放公共组件） + router.js（路由管理：Router） + store.js （状态管理：Vuex） + views（存放视图组件） - App.vue（页面入口文件） - main.js（程序入口文件） - package.json（项目配置文件） - package-lock.json（项目配置文件） - babel.config.js（babel 配置文件） - README.md（项目说明文档） - ...（其它配置文件）1、安装 Ant Design npm 是 Node 的包管理工具，我们可以通过 npm 安装 Ant Design 加上 --save 选项，可以同时将配置写入 package.json 的 dependencies 字段（生产环境依赖） npm install --save ant-design-vue2、引入 Ant Design 在 Vue 中引入 Ant Design 有两种方式，分别是全部引入和局部引入，下面将会逐一介绍 （1）全部引入 在 main.js 中引入并注册全部组件，即可在其它页面中直接使用全部组件 // main.js import Vue from 'vue' import App from './App.vue' import router from './router' import store from './store' // 新增代码：引入全部组件及样式 import Antd from 'ant-design-vue' import 'ant-design-vue/dist/antd.css' // 新增代码：注册全部组件 Vue.use(Antd) new Vue({ router, store, render: h => h(App) }).$mount('#app')采用这种引入方式，不管是否使用到的组件，都会全部加载进来，显然不是一个好的办法 （2）局部引入 在 main.js 中引入并注册特定组件，在其它页面中只可使用特定组件 // main.js import Vue from 'vue' import App from './App.vue' import router from './router' import store from './store' // 新增代码：引入特定组件及样式 import { Button } from 'ant-design-vue' import 'ant-design-vue/lib/button/style' // 新增代码：注册特定组件 Vue.component(Button.name, Button) new Vue({ router, store, render: h => h(App) }).$mount('#app')采用这种引入方式，可以保证只引入需要的组件（按需引入） 但每引入一个组件，都要手动将其对应的样式文件同时引入，未免过于麻烦 babel-plugin-import 插件可以辅助完成这个工作，首先安装 babel-plugin-import 插件 加上 --save-dev 选项，同时将配置写入 package.json 的 devDependencies 字段（开发环境依赖） npm install --save-dev babel-plugin-import然后在 babel.config.js 配置插件 module.exports = { presets: [ '@vue/cli-plugin-babel/preset' ], // 新增代码 plugins: [ [ 'import', { libraryName: 'ant-design-vue', libraryDirectory: 'es', style: true } ] ] }接着在 main.js 按需引入组件 // main.js // main.js import Vue from 'vue' import App from './App.vue' import router from './router' import store from './store' // 新增代码：引入特定组件 // 此时会自动引入对应的样式文件，无需再手动逐一引入 import { Button } from 'ant-design-vue' // 新增代码：注册特定组件 Vue.component(Button.name, Button) new Vue({ router, store, render: h => h(App) }).$mount('#app')最后记得使用 npm run serve 重启应用，即可在其它页面中使用特定组件 注意，如果你在使用 vue-cli 3 创建项目时配置了 Less，那么你在运行应用时可能会出现以下错误： Inline JavaScript is not enabled. Is it set in your options?这是因为 Webpack 对于 Less-loader 的默认配置不合适所导致的，所以我们需要修改一下配置 在根目录下的项目配置文件 vue.config.js 中添加以下配置项（如果没有这个文件，就自己创建一个） module.exports = { css: { loaderOptions: { less: { javascriptEnabled: true } } } }3、使用 Ant Design 在安装和引入 Ant Design 后，我们就可以在页面使用 Ant Design 中的组件啦 Primary export default { methods: { handleClick: function (e) { console.log('click', e) } } }这时，如果你能看到一个蓝色的按钮出现在页面上，就说明已经配置成功 接下来就可以尽情享受 Ant Design 带给你的高效开发体验 ———————————————— 版权声明：本文为CSDN博主「半虹」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。 原文链接：https://blog.csdn.net/wsmrzx/article/details/115769223 |
| CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |